<template>
    <div class="editinfo">
        <div class="edit-header">
            <div class="left">
                <van-button type="info" @click="BackTo">返回</van-button>
            </div>
            <div class="right">个人资料</div>
        </div>
        <div class="edit-body">
            <h3></h3>
            <div>
                <van-field v-model="email" name="邮箱" label="邮箱" placeholder="邮箱" disabled />
                <van-field v-model="nickName" name="昵称" label="昵称" placeholder="昵称" />
                <van-field v-model="phone" type="text" name="电话" label="电话" placeholder="电话" />
                <van-field v-model="age" type="text" name="年龄" label="年龄" placeholder="年龄" />
                <van-field name="sex" label="性别">
                    <template #input>
                        <van-radio-group v-model="sex" direction="horizontal">
                            <van-radio name="男">男</van-radio>
                            <van-radio name="女">女</van-radio>
                            <van-radio name="其他">其他</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field v-model="address" type="text" name="地址" label="地址" placeholder="地址" />
                <div style="margin: 16px;">
                    <van-button type="info" size="small" @click="saveUserInfo">保存编辑</van-button>
                    &nbsp;
                    &nbsp;
                    <!-- <van-button type="danger" plain native-type="submit">编辑</van-button> -->
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less">
.editinfo {
    .edit-header {
        background-color: #1989FA;
        width: 100%;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 15px 0px 0px;

        .right {
            color: #fff;
            font-size: 18px;
        }
    }

    .edit-body {
        padding: 10px 15px;
    }
}
</style>
<script>
import { Toast } from 'vant';
import { userInfo, editInfo } from '../api/index'
export default {
    data() {
        return {
            nickName: '',
            address: '',
            sex: "男",
            phone: "", 
            age: 0,
            email: "",
        };
    },
    created() {
        //  获取用户身份
        let token = localStorage.getItem("UTOKEN");
        if (token) {
            this.getUserInfo();
        }
    },

    methods: {
        // 获取用户信息
        async getUserInfo() {
            let token = localStorage.getItem("UTOKEN");
            if (token) {
                await userInfo({token}).then(
                    content=>{
                        // console.log(content)
                        if(content.code == 200) {
                            let result = content.result;
                            let user = result[0];
                            // console.log(user)
                            this.nickName = user.nickName;
                            this.age = user.age;
                            this.phone = user.phone;
                            this.sex = user.sex;
                            this.email = user.email;
                            this.address = user.address;
                        }
                        else {
                            Toast(content.msg);
                        }
                    }
                ).catch(err=>console.log(err));
            }
        },
        async saveUserInfo() {
           let nickName =  this.nickName 
            let age = this.age
            let phone = this.phone 
            let sex = this.sex 
            // let email = this.email
            let address = this.address
            let token = localStorage.getItem("UTOKEN");
            if(token){
                let data = {address, nickName,age,phone, sex,token}
                // console.log(data)

                await editInfo(data).then(
                    content=>{
                        Toast(content.msg);
                    }
                ).catch(err=>console.log(err))
            }
           
        },
        BackTo() {
            this.$router.back();
        }
    }
}
</script>